<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聚订单-发布询盘</title>
    <link rel="stylesheet" href="../../lib/css/reset.min.css">
    <link rel="stylesheet" href="../../lib/css/elementui.min.css">
    <link rel="stylesheet" href="../../css/all.min.css">

</head>
<style>
    .el-tabs__nav {
        background-color: #fafafa;
    }
    
    .el-tabs__active-bar {
        background-color: #3cb36f;
        top: 0;
        height: 4px;
    }
    
    .el-tabs__item {
        height: 74px;
        line-height: 74px;
        width: 400px;
    }
    
    .el-tabs__content {
        background-color: #fff;
    }
    
    .el-tabs__header {
        margin: 0;
    }
    
    .jfw-tab-content .btn-group {
        width: 780px;
    }
    
    .jfw-tab-content .btn {
        margin-bottom: 20px;
    }
</style>

<body>
    <div class="app-wrap" v-cloak id="jdd_xunpan">
        <header-top></header-top>
        <header-search-global type="订单"></header-search-global>
        <div class="bg-gray">
            <div class="jfw-xuqiu-top">
                <p class="line1">你的特色需求 我来加工定制</p>
                <p class="line2">
                    <span><i class="icon-jfw-xuqiu x1"></i>15000家工厂为您服务</span>
                    <span><i class="icon-jfw-xuqiu x2"></i>快速响应，无需苦等</span>
                    <span><i class="icon-jfw-xuqiu x3"></i>平台保障，违约赔付</span>
                </p>
            </div>
            <div class="container mt-74 mb-60">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane name="1">
                        <div class="jfw-tab-item" :class="{'active':activeName==1}" slot="label">
                            <span class="jfw-tab-ibg"><i class="icon-cloth"></i></span> 服饰加工
                        </div>
                        <!-- 服饰加工内容 -->
                        <div class="jfw-tab-content">
                            <p class="stitle">工艺类别：</p>
                            <div class="btn-group">
                                <button v-for="item in gongyitype" @click="chooseGongyi(item)" class="btn" :class="{'active':gongyi==item.id}">{{item.name}}</button>
                                <!-- 工艺类别悬浮窗 -->
                                <div class="btn-sons" v-show="showBtnSons">
                                    <div class="close" @click="closeBtnSons">关闭</div>
                                    <div class="son-list">
                                        <div v-for="li in gongyilist" class="radio-wrap" @click="chooseChildCategory(li)">
                                            <input class="radio-hide" type="radio" :value="li.id" name="c1" v-model="dress.categoryId">
                                            <span class="txt">{{li.name}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="stitle">合作方式：</p>
                            <div class="btn-group">
                                <button @click="chooseHezuoType(item)" class="btn" :class="{'active':hezuotype==item.number}" v-for="item in hezuolist">{{item.name}}</button>
                            </div>
                            <p class="stitle">订单数量：</p>
                            <div class="shuiprice-wrap">
                                <input v-model="dress.num" type="text">
                                <span class="unit-wrap" @click="toggleshowunit">{{dress.unitName}}<i class="icon-index_search_arr"></i></span>
                                <div class="unitlist" v-show="showunit">
                                    <span @click="chooseUnit(item)" v-for="item in unitList">{{item.name}}</span>
                                </div>
                            </div>
                            <p class="stitle">销售市场：</p>
                            <div class="btn-group">
                                <button @click="chooseXiaoshouType(item)" class="btn" :class="{'active':xiaoshoutype==item.number}" v-for="item in xiaoshoulist">{{item.name}}</button>
                            </div>
                            <p class="stitle">地区要求：</p>
                            <div class="btn-group">
                                <button @click="chooseDiqu(item)" class="btn" :class="{'active':diqu1==item.number}" v-for="item in diqulist">{{item.name}}</button>
                            </div>
                            <div class="date-group">
                                <div>
                                    <p class="stitle">交货日期</p>
                                    <el-date-picker v-model="dress.deliveryDate" type="date" :change="formatDate()" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                                <div>
                                    <p class="stitle">截止日期</p>
                                    <el-date-picker v-model="dress.deadline" type="date" :change="formatDate()" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </div>
                            <p class="stitle">上传图片说明，方便获取更优质服务：</p>
                            <div>
                                <!-- 上传图片 -->
                                <common-upimg :preimg="imgDescribe1" :testoption="{ maxwidth:300,maxheight:300,volume:200,maxlength:1}"></common-upimg>
                            </div>
                            <p class="stitle">详细说明：</p>
                            <textarea v-model="dress.describe" placeholder="描述具体服务内容（200字以内）"></textarea>
                            <div class="fabu-wrap">
                                <button @click="sendDress">发布</button>
                            </div>
                            <!-- 右侧悬浮块 -->
                            <div class="right-float-wrap">
                                <div class="top">
                                    <i class="icon-jfw-feiji"></i>
                                    <p class="biaoti">Michael的设计需求</p>
                                </div>
                                <div class="seperate"></div>
                                <div class="bottom">
                                    <p class="line">
                                        <span class="tag">工艺类别</span>
                                        <span>{{dress.categoryName}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">合作方式</span>
                                        <span>{{dress.cooperationName}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">订单数量</span>
                                        <span>{{dress.num}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">销售市场</span>
                                        <span>{{dress.salesMarketName}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">地区要求</span>
                                        <span>{{dress.areaName}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">交货日期</span>
                                        <span>{{dress.deliveryDate}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">截止日期</span>
                                        <span>{{dress.deadline}}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane name="2">
                        <div class="jfw-tab-item" :class="{'active':activeName==2}" slot="label">
                            <span class="jfw-tab-ibg"><i class="icon-jdd-mliao"></i></span> 面料采购
                        </div>
                        <!-- 面料采购内容 -->
                        <div class="jfw-tab-content">
                            <p class="stitle">面料分类：</p>
                            <div class="btn-group">
                                <button v-for="item in materialCatagoryList" @click="chooseGongyi(item)" class="btn" :class="{'active':materialCategoryId==item.id}">{{item.name}}</button>
                                <!-- 工艺类别悬浮窗 -->
                                <div class="btn-sons" v-show="showBtnSons">
                                    <div class="close" @click="closeBtnSons">关闭</div>
                                    <div v-for="son in childMaterialCatagoryList">
                                        <p class="son-title" @click="chooseChildCategory(son)">{{son.name}}</p>
                                        <div class="son-list">
                                            <div v-for="li in son.childrenList" class="radio-wrap" @click="chooseChildCategory(li)">
                                                <input class="radio-hide" type="radio" :value="li.id" name="c1" v-model="gongyiValue">
                                                <span class="txt">{{li.name}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="stitle">采购数量：</p>
                            <div class="shuiprice-wrap">
                                <input v-model="material.num" type="text">
                                <span class="unit-wrap" @click="toggleshowunit">{{material.unitName}}<i class="icon-index_search_arr"></i></span>
                                <div class="unitlist" v-show="showunit">
                                    <span @click="chooseUnit(item)" v-for="item in unitList">{{item.name}}</span>
                                </div>
                            </div>
                            <p class="stitle">地区要求：</p>
                            <div class="btn-group">
                                <button @click="chooseDiqu(item)" class="btn" :class="{'active':diqu2==item.number}" v-for="item in diqulist">{{item.name}}</button>
                            </div>
                            <div class="date-group">
                                <div>
                                    <p class="stitle">交货日期</p>
                                    <el-date-picker v-model="material.deliveryDate" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                                <div>
                                    <p class="stitle">截止日期</p>
                                    <el-date-picker v-model="material.deadline" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </div>
                            <p class="stitle">上传辅料正反面，便于卖家提供准确的商品</p>
                            <div class="upimg-group">
                                <!-- 上传图片 -->
                                <div class="mr-20">
                                    <common-upimg :preimg="imgDescribe2" :testoption="{ maxwidth:300,maxheight:300,volume:200,maxlength:1}"></common-upimg>
                                </div>
                                <div class="mr-20">
                                    <common-upimg :preimg="imgDescribe3" :testoption="{ maxwidth:300,maxheight:300,volume:200,maxlength:1}"></common-upimg>
                                </div>
                            </div>
                            <p class="stitle">需求描述：</p>
                            <textarea v-model="material.describe" placeholder="描述您的要求，如期望价格，质量等"></textarea>
                            <div class="fabu-wrap">
                                <button @click="sendMaterial">发布</button>
                            </div>
                            <!-- 右侧悬浮块 -->
                            <div class="right-float-wrap">
                                <div class="top">
                                    <i class="icon-jfw-feiji"></i>
                                    <p class="biaoti">Michael的设计需求</p>
                                </div>
                                <div class="seperate"></div>
                                <div class="bottom">
                                    <p class="line">
                                        <span class="tag">面料分类</span>
                                        <span>{{material.categoryName}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">订单数量</span>
                                        <span>{{material.num}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">供货区域</span>
                                        <span>{{material.areaName}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">交货日期</span>
                                        <span>{{material.deliveryDate}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">截止日期</span>
                                        <span>{{material.deadline}}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane name="3">
                        <div class="jfw-tab-item" :class="{'active':activeName==3}" slot="label">
                            <span class="jfw-tab-ibg"><i class="icon-jdd-fliao"></i></span> 辅料采购
                        </div>
                        <!-- 找辅料需求内容 -->
                        <div class="jfw-tab-content">
                            <p class="stitle">辅料分类：</p>
                            <div class="btn-group">
                                <button v-for="item in accessoriesCatagoryList" @click="chooseGongyi(item)" class="btn" :class="{'active':accessoriesCategoryId==item.id}">{{item.name}}</button>
                                <!-- 工艺类别悬浮窗 -->
                                <div class="btn-sons" v-show="showBtnSons">
                                    <div class="close" @click="closeBtnSons">关闭</div>
                                    <div v-for="son in childAccessoriesCatagoryList">
                                        <p class="son-title" @click="chooseChildCategory(son)">{{son.name}}</p>
                                        <div class="son-list">
                                            <div v-for="li in son.childrenList" class="radio-wrap" @click="chooseChildCategory(li)">
                                                <input class="radio-hide" type="radio" :value="li.id" name="c1">
                                                <span class="txt">{{li.name}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <p class="stitle">辅料名称：</p>
                            <div class="shuiprice-wrap">
                                <input type="text" v-model="accessories.name">
                            </div>
                            <p class="stitle">订单数量：</p>
                            <div class="shuiprice-wrap">
                                <input v-model="accessories.num" type="text">
                                <span class="unit-wrap" @click="toggleshowunit">{{accessories.unitName}}<i class="icon-index_search_arr"></i></span>
                                <div class="unitlist" v-show="showunit">
                                    <span @click="chooseUnit(item)" v-for="item in unitList">{{item.name}}</span>
                                </div>
                            </div>
                            <p class="stitle">供货区域：</p>
                            <div class="btn-group">
                                <button @click="chooseDiqu(item)" class="btn" :class="{'active':diqu3==item.number}" v-for="item in diqulist">{{item.name}}</button>
                            </div>
                            <div class="date-group">
                                <div>
                                    <p class="stitle">交货日期</p>
                                    <el-date-picker v-model="accessories.deliveryDate" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                                <div>
                                    <p class="stitle">截止日期</p>
                                    <el-date-picker v-model="accessories.deadline" type="date" placeholder="选择日期">
                                    </el-date-picker>
                                </div>
                            </div>
                            <p class="stitle">上传辅料正反面，便于卖家提供准确的商品</p>
                            <div class="upimg-group">
                                <!-- 上传图片 -->
                                <div class="mr-20">
                                    <common-upimg :preimg="imgDescribe2" :testoption="{ maxwidth:300,maxheight:300,volume:200,maxlength:1}"></common-upimg>
                                </div>
                                <div class="mr-20">
                                    <common-upimg :preimg="imgDescribe3" :testoption="{ maxwidth:300,maxheight:300,volume:200,maxlength:1}"></common-upimg>
                                </div>
                            </div>
                            <p class="stitle">需求描述：</p>
                            <textarea v-model="accessories.describe" placeholder="描述您的要求，如期望价格，质量等"></textarea>
                            <div class="fabu-wrap">
                                <button @click="sendAccessories">发布</button>
                            </div>
                            <!-- 右侧悬浮块 -->
                            <div class="right-float-wrap">
                                <div class="top">
                                    <i class="icon-jfw-feiji"></i>
                                    <p class="biaoti">Michael的设计需求</p>
                                </div>
                                <div class="seperate"></div>
                                <div class="bottom">
                                    <p class="line">
                                        <span class="tag">辅料分类</span>
                                        <span>{{accessories.categoryName}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">辅料名称</span>
                                        <span>{{accessories.name}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">订单数量</span>
                                        <span>{{accessories.num}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">供货区域</span>
                                        <span>{{accessories.areaName}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">交货日期</span>
                                        <span>{{accessories.deliveryDate}}</span>
                                    </p>
                                    <p class="line">
                                        <span class="tag">截止日期</span>
                                        <span>{{accessories.deadline}}</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <common-footer></common-footer>
        </div>
    </div>
    <script src="../../lib/js/vue.js"></script>
    <script src="../../lib/js/axios.min.js"></script>
    <script src="../../lib/js/elementui.min.js"></script>
    <!-- mock 数据 打包发布的时候记得移除 -->
    <script src="../../lib/js/mock.js"></script>
    <script src="../../js/all.min.js"></script>
    <script>
        jdd_xunpan();
    </script>
</body>

</html>